﻿<template>
  <el-dialog v-drag :title='dialogTitle' :visible.sync='dialogFormVisible' width='60%' @close = 'resetForm'
  append-to-body :close-on-click-modal = "false" :close-on-press-escape = "false">
    <div v-loading = 'loading' v-if = 'row'>
      <el-form label-width = '100px'>
        <el-form-item label = '是否联动：'>
          <el-switch v-model="row.linkageOption.isLinkage"></el-switch>
        </el-form-item>
        <el-form-item label = '联动方式：' v-show = 'row.linkageOption.isLinkage'>
          <el-select v-model="row.linkageOption.linkageType">
            <el-option label = '数据渲染(需调用接口获取数据更新数据)' value = 'eventRender'></el-option>
            <el-option label = '数据源渲染(需调用接口获取数据更新下拉框等数据源)' :disabled = "Object.keys(row.linkageOption).indexOf('sourceExpression') === -1" value = 'eventRenderDataSource'></el-option>
            <el-option :disabled = "Object.keys(row.linkageOption).indexOf('expressionArray') === -1" label = '数据计算(需要设置计算表达式)' value = 'expressionRender'></el-option>
            <el-option :disabled = "Object.keys(row.linkageOption).indexOf('showExpression') === -1" label = '显示隐藏(需要设置显示隐藏表达式)' value = 'showRender'></el-option>
          </el-select>
        </el-form-item>
        <!-- 数据渲染类型时需要填写的内容 -->
        <el-form-item label = '联动方法：' v-show = "row.linkageOption.isLinkage && row.linkageOption.linkageType === 'eventRender'">
          <el-select v-model="row.linkageOption.linkageEvents" filterable clearable>
            <el-option v-for = 'eventItem in allEvents' :key = 'eventItem.no' :label = 'eventItem.name' :value = 'eventItem.no'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label = '联动字段：' v-show = "row.linkageOption.isLinkage && row.linkageOption.linkageType === 'eventRender'">
          <el-select v-model="row.linkageOption.linkageElements" multiple collapse-tags filterable clearable>
            <el-option v-for = '(eventItem, index) in allTableColumns' :key = 'index' :label = "eventItem.text + '(' + eventItem.indexName + ')'" :value = 'eventItem.indexName'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label = '方法词典表：' v-show = "row.linkageOption.isLinkage && Object.keys(row.linkageOption).indexOf('inputDic')>=0 && row.linkageOption.linkageType === 'eventRender'">
          <el-input value = '点击设置选中的联动方法所需词典表' @focus = 'setOptionsEventsDic'></el-input>
        </el-form-item>
        <!-- 数据计算时需要填写的内容 -->
        <el-form-item label = '计算字段：' v-show = "row.linkageOption.isLinkage && row.linkageOption.linkageType === 'expressionRender' && Object.keys(row.linkageOption).indexOf('expressionArray') !== -1">
          <div class="addColumn">
            <p @click = "handleAddShowExpression('expressionArray')"> <i class="iconfont icon-add"></i>添加字段</p>
          </div>
          <el-table :data = 'row.linkageOption.expressionArray' stripe border empty-text="暂无数据，请添加" max-height = 260>
            <el-table-column align="center" label = '计算字段名(计算表达式中字段)' show-overflow-tooltip>
              <template slot-scope="scope">
                <el-select v-model="scope.row.expressionElements" multiple collapse-tags filterable clearable placeholder="请选择计算字段名">
                  <el-option v-for = '(eventItem, index) in allExpressionColumns' :key = 'index' :label = "eventItem.text + '(' + eventItem.indexName + ')'" :value = 'eventItem.indexName'></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center" label = '计算表达式(被影响的字段名={计算字段名}+{计算字段名}+常量)' show-overflow-tooltip>
              <template slot-scope="scope">
                <el-input type = 'textarea' :autosize="{ minRows: 1, maxRows: 3}"  v-model="scope.row.expression" placeholder = "例：被影响的字段名={计算字段名}+{计算字段名}+常量，如：a={b}+{c}-1"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="60">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click = "handleRemoveShowExpression('expressionArray', scope.$index)" title = '移除'>
                  <i class="iconfont icon-shanchu"></i>移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <!-- 显示隐藏的类型 -->
        <el-form-item label = '联动配置：' v-show = "row.linkageOption.isLinkage && row.linkageOption.linkageType === 'showRender'">
          <div class="addColumn">
            <p @click = "handleAddShowExpression('showExpression')"> <i class="iconfont icon-add"></i>添加配置</p>
          </div>
          <el-table :data = 'row.linkageOption.showExpression' stripe border empty-text="暂无数据，请添加" max-height = 260>
            <el-table-column align="center" label = '关联元素(显示或隐藏元素)' show-overflow-tooltip>
              <template slot-scope="scope">
                <el-select v-model="scope.row.linkageElement" filterable clearable placeholder="请选择关联元素">
                  <el-option v-for = '(eventItem, index) in allTableColumns' :key = 'index' :label = "eventItem.text + '(' + eventItem.indexName + ')'" :value = 'eventItem.indexName'></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center" label = '表达式中变量' show-overflow-tooltip>
              <template slot-scope="scope">
                <el-select v-model="scope.row.variableElement" filterable clearable multiple collapse-tags placeholder="请选择表达式中变量">
                  <el-option v-for = '(eventItem, index) in allExpressionColumns' :key = 'index' :label = "eventItem.text + '(' + eventItem.indexName + ')'" :value = 'eventItem.indexName'></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center" label = '显示条件表达式(变量请用{变量名}表示)' show-overflow-tooltip>
              <template slot-scope="scope">
                <el-input v-model="scope.row.showExpress" clearable placeholder="请输入比较运算表达式"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="60">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click = "handleRemoveShowExpression('showExpression', scope.$index)" title = '移除'>
                  <i class="iconfont icon-shanchu"></i>移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <!-- 触发联动改变数据源类型 -->
        <el-form-item label = '数据源元素：' v-show = "row.linkageOption.isLinkage && row.linkageOption.linkageType === 'eventRenderDataSource'">
          <div class="addColumn">
            <p @click = "handleAddShowExpression('sourceExpression')"> <i class="iconfont icon-add"></i>添加元素</p>
          </div>
          <el-table :data = 'row.linkageOption.sourceExpression' stripe border empty-text="暂无数据，请添加" max-height = 260>
            <el-table-column align="center" label = '关联元素(改变数据源的元素)' show-overflow-tooltip>
              <template slot-scope="scope">
                <el-select v-model="scope.row.linkageElement" filterable clearable placeholder="请选择关联元素">
                  <el-option v-for = '(eventItem, index) in allTableColumns' :key = 'index' :label = "eventItem.text + '(' + eventItem.indexName + ')'" :value = 'eventItem.indexName'></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center" label = '数据源方法' show-overflow-tooltip>
              <template slot-scope="scope">
                <el-select v-model="scope.row.eventsNo" filterable clearable>
                  <el-option v-for = 'eventItem in allEvents' :key = 'eventItem.no' :label = 'eventItem.name' :value = 'eventItem.no'></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center" label = '方法词典表' show-overflow-tooltip>
              <template slot-scope="scope">
                <span class = 'clickStatus' @click = 'setSourceEventDic(scope.row, scope.$index)'>点击设置词典表</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="60">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click = "handleRemoveShowExpression('sourceExpression', scope.$index)" title = '移除'>
                  <i class="iconfont icon-shanchu"></i>移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div class = 'buttonContent' style = 'text-align:center'>
        <el-button type="info" @click="resetForm">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </div>
    <!-- 设置下拉框的词典表时 -->
    <Event-Dic :row = 'selectEventsInfo' :eventDicDialog = 'eventDicDialog' @sureSeetingEventDic = 'sureSeetingEventDic' @giveUp = 'eventDicDialog = false'></Event-Dic>
  </el-dialog>
</template>

<script>
import EventDic from '@/components/Events/EventsDic.vue'
export default {
  components: {
    EventDic
  },
  props: ['row', 'editTableLinkageDialog', 'clickTableColumns', 'linkageFrom'],
  data () {
    return {
      dialogTitle: '设置可编辑表格的字段联动',
      dialogFormVisible: false,
      allEvents: [],
      loading: false,
      // 设置所选服务的词典表
      eventDicDialog: false,
      selectEventsInfo: {
        inputDic: [],
        outputDic: [],
        eventsNo: ''
      },
      // 联动方式为数据渲染时(需要剔除本身)
      allTableColumns: [],
      // 联动方式为数据计算时（需要包含本身）
      allExpressionColumns: [],
      // 联动方式改变的是数据源时
      clickIndex: -1
    }
  },
  methods: {
    // 初始化页面
    initPage () {
      this.loading = true
      this.allEvents = []
      this.allTableColumns = []
      this.allExpressionColumns = []
      this.clickIndex = -1
      if (this.linkageFrom === 'normal') {
        this.dialogTitle = '设置元素联动操作'
      }
      let currentElementKey = this.linkageFrom === 'normal' ? this.row.model : this.row.indexName
      // 获取关联的栏位信息
      if (this.clickTableColumns.length) {
        this.clickTableColumns.forEach((item) => {
          if (item.indexName && item.text) {
            let obj = {
              indexName: item.indexName,
              text: item.text
            }
            if (item.indexName !== currentElementKey) {
              this.$set(this.allTableColumns, this.allTableColumns.length, obj)
            }
            this.$set(this.allExpressionColumns, this.allExpressionColumns.length, obj)
          }
        })
      }
      this.getAllEvents()
    },
    // 获取所有的动态表单事件
    getAllEvents () {
      this.$get('/events4dform/alllist').then(data => {
        this.loading = false
        if (data.data.result.code === 'success') {
          this.allEvents = data.data.result.data
        } else if (data.data.result.code === 'failed') {
          this.$message({
            message: data.data.result.msg,
            type: 'warning'
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 设置下拉框的词典表时
    setOptionsEventsDic () {
      if (this.row.linkageOption.isLinkage && !this.row.linkageOption.linkageEvents) {
        this.$message({
          message: '请先选择联动方法',
          type: 'warning'
        })
      } else {
        this.selectEventsInfo = {
          inputDic: this.row.linkageOption.inputDic.length ? JSON.parse(JSON.stringify(this.row.linkageOption.inputDic)) : [],
          outputDic: this.row.linkageOption.outputDic.length ? JSON.parse(JSON.stringify(this.row.linkageOption.outputDic)) : [],
          eventsNo: this.row.linkageOption.linkageEvents
        }
        this.eventDicDialog = true
      }
    },
    // 设置数据源的事件词典表时
    setSourceEventDic (row, index) {
      if (row.eventsNo) {
        this.selectEventsInfo = {
          inputDic: row.inputDic.length ? JSON.parse(JSON.stringify(row.inputDic)) : [],
          outputDic: row.outputDic.length ? JSON.parse(JSON.stringify(row.outputDic)) : [],
          eventsNo: row.eventsNo
        }
        this.clickIndex = index
        this.eventDicDialog = true
      } else {
        this.$message({
          message: '请先选择数据源方法',
          type: 'warning'
        })
      }
    },
    // 设置词典表成功时
    sureSeetingEventDic (fromSetting) {
      if (this.clickIndex !== -1 && this.row.linkageOption.linkageType === 'eventRenderDataSource') {
        this.row.linkageOption.sourceExpression[this.clickIndex].inputDic = fromSetting.inputDic
        this.row.linkageOption.sourceExpression[this.clickIndex].outputDic = fromSetting.outputDic
      } else {
        this.row.linkageOption.inputDic = fromSetting.inputDic
        this.row.linkageOption.outputDic = fromSetting.outputDic
      }
      this.eventDicDialog = false
    },
    // 添加显示和隐藏的字段时
    handleAddShowExpression (type) {
      if (type === 'showExpression') {
        this.row.linkageOption.showExpression.push({
          linkageElement: null,
          variableElement: null,
          showExpress: null
        })
      } else if (type === 'sourceExpression') {
        this.row.linkageOption.sourceExpression.push({
          linkageElement: null,
          eventsNo: null,
          inputDic: [],
          outputDic: []
        })
      } else if (type === 'expressionArray') {
        this.row.linkageOption.expressionArray.push({
          expression: null,
          expressionElements: []
        })
      }
    },
    // 移除时
    handleRemoveShowExpression (type, index) {
      this.row.linkageOption[type].splice(index, 1)
    },
    // 取消时
    resetForm () {
      this.$emit('giveUpLinkage')
    },
    // 确定时
    submitForm () {
      let toParent = {
        isLinkage: this.row.linkageOption.isLinkage,
        linkageEvents: this.row.linkageOption.linkageEvents,
        linkageType: this.row.linkageOption.linkageType,
        inputDic: this.row.linkageOption.inputDic ? this.row.linkageOption.inputDic : [],
        outputDic: this.row.linkageOption.outputDic ? this.row.linkageOption.outputDic : [],
        linkageElements: this.row.linkageOption.linkageElements ? this.row.linkageOption.linkageElements : [],
        expressionArray: this.row.linkageOption.expressionArray ? this.row.linkageOption.expressionArray : [],
        showExpression: this.row.linkageOption.showExpression ? this.row.linkageOption.showExpression : [],
        sourceExpression: this.row.linkageOption.sourceExpression ? this.row.linkageOption.sourceExpression : []
      }
      this.$emit('sureSeetingEditTableLinkage', toParent)
    }
  },
  watch: {
    editTableLinkageDialog: {
      handler (val) {
        this.dialogFormVisible = val
        if (val) {
          this.initPage()
        }
      },
      deep: true
    }
  }
}
</script>kkko
